<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智慧生活推送服务 - 服务号版</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 100%;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .header {
            background: linear-gradient(135deg, #07C160 0%, #05a855 100%);
            color: white;
            padding: 25px 20px;
            text-align: center;
            position: relative;
        }

        .back-btn {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
        }

        .header h1 {
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .header p {
            font-size: 14px;
            opacity: 0.9;
        }

        .content {
            padding: 25px 20px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 16px;
            color: #444;
            display: flex;
            align-items: center;
        }

        .form-group label i {
            margin-right: 10px;
            color: #07C160;
        }

        .city-selector {
            display: flex;
            gap: 12px;
        }

        select,
        input[type="time"],
        textarea,
        input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 2px solid #e1e5eb;
            border-radius: 12px;
            font-size: 16px;
            background: white;
            transition: all 0.3s;
        }

        select:focus,
        input[type="time"]:focus,
        textarea:focus,
        input[type="text"]:focus {
            border-color: #07C160;
            outline: none;
            box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.2);
        }

        select {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
        }

        .services {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .service-item {
            border: 2px solid #e1e5eb;
            border-radius: 12px;
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s;
            background: #fafbfc;
            cursor: pointer;
        }

        .service-item:hover {
            transform: translateY(-3px);
        }

        .service-item.active {
            border-color: #07C160;
            background: #e9f9ef;
            box-shadow: 0 5px 15px rgba(7, 193, 96, 0.2);
        }

        .service-icon {
            font-size: 28px;
            margin-bottom: 10px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: #444;
        }

        .service-desc {
            font-size: 12px;
            color: #666;
        }

        .time-selector {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        input[type="time"] {
            flex: 1;
        }

        .time-selector span {
            white-space: nowrap;
            color: #666;
        }

        .submit-btn {
            background: linear-gradient(135deg, #07C160 0%, #05a855 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 18px;
            font-size: 17px;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
            box-shadow: 0 4px 15px rgba(7, 193, 96, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(7, 193, 96, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .submit-btn.loading {
            background: #8cd4a7;
            pointer-events: none;
        }

        .footer {
            text-align: center;
            padding: 20px 15px;
            font-size: 13px;
            color: #888;
            border-top: 1px solid #eee;
            margin-top: 20px;
            line-height: 1.5;
        }

        .notification {
            padding: 15px;
            margin: 20px 0;
            border-radius: 12px;
            background: #e9f9ef;
            border-left: 4px solid #07C160;
            font-size: 14px;
        }

        .hidden {
            display: none;
        }

        #success-message {
            text-align: center;
            padding: 30px;
            color: #28a745;
        }

        #success-message i {
            font-size: 50px;
            margin-bottom: 20px;
        }

        .custom-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .tag {
            background: #e9f9ef;
            color: #07C160;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .tag i {
            margin-left: 5px;
            cursor: pointer;
        }

        .tab-bar {
            display: flex;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .tab.active {
            background: #07C160;
            color: white;
        }

        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        .history-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .history-date {
            font-weight: bold;
            color: #07C160;
            margin-bottom: 5px;
        }

        .history-content {
            color: #666;
            font-size: 14px;
        }

        .switch-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            margin-bottom: 15px;
        }

        .switch-label {
            display: flex;
            flex-direction: column;
        }

        .switch-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .switch-subtitle {
            font-size: 13px;
            color: #666;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #07C160;
        }

        input:checked+.slider:before {
            transform: translateX(26px);
        }

        .time-range {
            display: flex;
            align-items: center;
            margin-top: 10px;
            padding: 10px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e1e5eb;
        }

        .time-range input {
            flex: 1;
            border: none;
            padding: 5px;
            text-align: center;
        }

        .time-range span {
            margin: 0 5px;
            color: #666;
        }

        .hidden {
            display: none;
        }

        .loading-state, .empty-state, .error-state {
            text-align: center;
            padding: 30px;
            color: #666;
            }

        .loading-state i {
            font-size: 24px;
            margin-bottom: 10px;
            }

        .empty-state i {
            font-size: 48px;
            color: #aaa;
            margin-bottom: 15px;
            }

        .error-state i {
            font-size: 48px;
            color: #ff6b6b;
            margin-bottom: 15px;
            }

        .retry-btn {
            margin-top: 15px;
            padding: 8px 20px;
            background: #07C160;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            }

    </style>
</head>

<body>
    <div class="tab-bar">
        <div class="tab active" data-tab="subscribe">订阅服务</div>
        <div class="tab" data-tab="history">推送历史</div>
        <div class="tab" data-tab="settings">账号设置</div>
    </div>

    <!-- 订阅服务页面 -->
    <div class="page active" id="subscribe-page">
        <div class="container">
            <div class="header">
                <a class="back-btn" href="javascript:void(0)"><i class="fas fa-cog"></i></a>
                <h1><i class="fas fa-bell"></i> 智慧生活推送服务</h1>
                <p>定制您的专属每日资讯</p>
            </div>

            <div class="content">
                <div class="notification">
                    <p><strong>服务号专属功能</strong>：您可随时接收推送，无需重复订阅，消息直达微信聊天列表。</p>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-city"></i> 选择城市</label>
                    <div class="city-selector">
                        <select id="province">
                            <option value="">选择省份</option>
                        </select>
                        <select id="city">
                            <option value="">选择城市</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-check-circle"></i> 订阅服务</label>
                    <div class="services">
                        <div class="service-item active" data-service="weather">
                            <div class="service-icon">🌤️</div>
                            <div class="service-name">天气预报</div>
                            <div class="service-desc">每日天气情况</div>
                        </div>
                        <div class="service-item active" data-service="traffic">
                            <div class="service-icon">🚗</div>
                            <div class="service-name">限行信息</div>
                            <div class="service-desc">车辆限行提醒</div>
                        </div>
                        <div class="service-item" data-service="news">
                            <div class="service-icon">📰</div>
                            <div class="service-name">每日新闻</div>
                            <div class="service-desc">本地热点新闻</div>
                        </div>
                        <div class="service-item" data-service="tips">
                            <div class="service-icon">💡</div>
                            <div class="service-name">生活提示</div>
                            <div class="service-desc">实用生活信息</div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-clock"></i> 推送时间</label>
                    <div class="time-selector">
                        <input type="time" value="07:30">
                        <span>每日定时推送</span>
                    </div>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-edit"></i> 自定义内容</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" id="custom-input" placeholder="输入您想订阅的特定内容...">
                        <button
                            style="white-space: nowrap; padding: 0 15px; background: #07C160; color: white; border: none; border-radius: 8px;"
                            onclick="addCustomTag()">添加</button>
                    </div>
                    <div class="custom-tags" id="custom-tags">
                        <!-- 自定义标签会动态添加到这里 -->
                    </div>
                </div>

                <button class="submit-btn" id="subscribe-btn"><i class="fas fa-check"></i> 保存设置</button>

                <div id="success-message" class="hidden">
                    <i class="fas fa-check-circle"></i>
                    <h2>设置已保存！</h2>
                    <p>您的订阅偏好已更新</p>
                    <p>明天开始您将在指定时间收到推送</p>
                </div>
            </div>

            <div class="footer">
                <p>服务号专属功能 · 消息直达聊天列表</p>
                <p>可随时通过公众号菜单修改设置</p>
            </div>
        </div>
    </div>

    <!-- 推送历史页面 -->
    <div class="page" id="history-page">
        <div class="container">
            <div class="header">
                <h1><i class="fas fa-history"></i> 推送历史</h1>
                <p>最近收到的推送消息</p>
            </div>

            <div class="content">
                <div class="history-item">
                    <div class="history-date">今天 07:30</div>
                    <div class="history-content">
                        【北京今日天气】晴，15°C~25°C，西南风2级。空气质量良。<br>
                        【限行提醒】今日限行尾号：3和8
                    </div>
                </div>

                <div class="history-item">
                    <div class="history-date">昨天 07:30</div>
                    <div class="history-content">
                        【北京今日天气】多云，14°C~22°C，东风3级。空气质量优。<br>
                        【限行提醒】今日限行尾号：2和7
                    </div>
                </div>

                <div class="history-item">
                    <div class="history-date">2023-10-28 07:30</div>
                    <div class="history-content">
                        【北京今日天气】小雨，12°C~18°C，东北风3级。空气质量优。<br>
                        【限行提醒】今日限行尾号：1和6
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 账号设置页面 -->
    <div class="page" id="settings-page">
        <div class="container">
            <div class="header">
                <h1><i class="fas fa-user-cog"></i> 账号设置</h1>
                <p>管理您的账户和推送偏好</p>
            </div>

            <div class="content">
                <div class="form-group">
                    <label><i class="fas fa-bell"></i> 推送设置</label>
                    <!-- 启用推送通知开关 -->
                    <div class="switch-container">
                        <div class="switch-label">
                            <span class="switch-title">启用推送通知</span>
                            <span class="switch-subtitle">关闭后将不再接收任何推送消息</span>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="push-notification" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <!-- 免打扰时段开关 -->
                    <div class="switch-container">
                        <div class="switch-label">
                            <span class="switch-title">免打扰时段</span>
                            <span class="switch-subtitle">设置时间段内不接收推送消息</span>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="quiet-hours">
                            <span class="slider"></span>
                        </label>
                    </div>

                    <!-- 免打扰时间段选择器 -->
                    <div id="quiet-time-range" class="hidden">
                        <div class="time-range">
                            <input type="time" id="quiet-start" value="23:00">
                            <span>至</span>
                            <input type="time" id="quiet-end" value="07:00">
                        </div>
                    </div>
                </div>

                <!-- <div class="form-group">
                    <label><i class="fas fa-shield-alt"></i> 隐私设置</label>
                    <div style="background: #f8f9fa; padding: 15px; border-radius: 12px;">
                        <label style="display: flex; justify-content: space-between;">
                            <span>允许位置访问</span>
                            <input type="checkbox" checked data-toggle="switch">
                        </label>
                        <label style="display: flex; justify-content: space-between; margin-top: 10px;">
                            <span>个性化推荐</span>
                            <input type="checkbox" checked data-toggle="switch">
                        </label>
                    </div>
                </div>


                <div class="form-group">
                    <label><i class="fas fa-database"></i> 数据管理</label>
                    <button class="submit-btn" style="background: #576b95;"><i class="fas fa-download"></i>
                        导出我的数据</button>
                    <button class="submit-btn" style="background: #ff6b6b; margin-top: 10px;"><i
                            class="fas fa-trash-alt"></i> 删除所有数据</button>
                </div> -->

                <div class="form-group">
                    <label>推送设置</label>
                    <button class="submit-btn" id="save-settings-btn"><i class="fas fa-check"></i> 保存设置</button>
                </div>

            </div>
        </div>
    </div>

    <script>
        // 初始化微信JS-SDK
        wx.config({
            debug: false, // 开启调试模式
            appId: '你的AppID', // 必填，公众号的唯一标识
            timestamp: new Date().getTime(), // 必填，生成签名的时间戳
            nonceStr: '随机字符串', // 必填，生成签名的随机串
            signature: '签名', // 必填，签名
            jsApiList: [
                'chooseImage', 'previewImage', 'uploadImage', 'downloadImage',
                'getNetworkType', 'getLocation', 'openLocation', 'scanQRCode'
            ] // 必填，需要使用的JS接口列表
        });

        // 页面切换逻辑
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function () {
                // 更新标签状态
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                // 显示对应页面
                const tabName = this.getAttribute('data-tab');
                document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
                document.getElementById(tabName + '-page').classList.add('active');

                // 加载推送历史
                if (tabName === 'history') {
                    loadHistory();
                }
            });
        });

        // 服务选择交互
        document.querySelectorAll('.service-item').forEach(item => {
            item.addEventListener('click', function () {
                this.classList.toggle('active');
            });
        });


        // 保存账号设置
        document.getElementById('save-settings-btn').addEventListener('click', function() {
            const pushEnabled = document.querySelector('#settings-page .switch.on') !== null;
            const quietHoursEnabled = document.querySelector('#settings-page .switch.on ~ .switch.on') !== null;
            const quietHoursStart = '23:00'; // 可以从时间选择器获取实际值
            const quietHoursEnd = '07:00';   // 可以从时间选择器获取实际值
            
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
            
            fetch('/wechat/save-settings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    pushEnabled: pushEnabled,
                    quietHoursEnabled: quietHoursEnabled,
                    quietHoursStart: quietHoursStart,
                    quietHoursEnd: quietHoursEnd
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    this.innerHTML = '<i class="fas fa-check"></i> 保存成功';
                    setTimeout(() => {
                        this.innerHTML = '<i class="fas fa-check"></i> 保存设置';
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('保存设置失败:', error);
                this.innerHTML = '<i class="fas fa-exclamation-circle"></i> 保存失败';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-check"></i> 保存设置';
                }, 2000);
            });
        });

        // 添加自定义标签
        function addCustomTag() {
            const input = document.getElementById('custom-input');
            const value = input.value.trim();

            if (value) {
                const tagsContainer = document.getElementById('custom-tags');
                const tag = document.createElement('div');
                tag.className = 'tag';
                tag.innerHTML = `${value} <i class="fas fa-times" onclick="removeTag(this)"></i>`;
                tagsContainer.appendChild(tag);

                // 清空输入框
                input.value = '';
            }
        }

        // 移除标签
        function removeTag(element) {
            element.parentElement.remove();
        }

        // 加载城市数据
        function loadCityData() {
            console.log('开始加载城市数据...');
            fetch('/wechat/city-data')
                .then(response => response.json())
                .then(data => {
                    const provinceSelect = document.getElementById('province');
                    const citySelect = document.getElementById('city');

                    // 清空选项
                    provinceSelect.innerHTML = '<option value="">选择省份</option>';
                    citySelect.innerHTML = '<option value="">选择城市</option>';

                    // 填充省份数据
                    data.data.provinces.forEach(province => {
                        const option = document.createElement('option');
                        option.value = province.code;
                        option.textContent = province.name;
                        provinceSelect.appendChild(option);
                    });

                    // 省份选择变化事件
                    provinceSelect.addEventListener('change', function () {
                        const provinceCode = this.value;
                        citySelect.innerHTML = '<option value="">选择城市</option>';

                        if (provinceCode) {
                            const selectedProvince = data.data.provinces.find(p => p.code === provinceCode);
                            if (selectedProvince) {
                                selectedProvince.cities.forEach(city => {
                                    const option = document.createElement('option');
                                    option.value = city.code;
                                    option.textContent = city.name;
                                    citySelect.appendChild(option);
                                });
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('加载城市数据失败:', error);
                });
        }

        // 加载推送历史
        async function loadHistory() {
            const historyContent = document.getElementById('history-content');
            
            try {
                // 显示加载状态
                historyContent.innerHTML = `
                    <div class="loading-state">
                        <i class="fas fa-spinner fa-spin"></i>
                        <span>加载中...</span>
                    </div>
                `;

                // 从页面全局变量获取真实openid
                const openid = window.userInfo?.openid;
                if (!openid) {
                    throw new Error('无法获取用户信息');
                }

                // 添加请求签名
                const timestamp = Date.now();
                const nonce = Math.random().toString(36).substr(2, 8);
                const signature = await generateSignature(timestamp, nonce);

                const response = await fetch(`/wechat/push-history?openid=${openid}&timestamp=${timestamp}&nonce=${nonce}&signature=${signature}`);
                const data = await response.json();

                historyContent.innerHTML = '';

                if (data.code === 200 && data.data && data.data.length > 0) {
                    data.data.forEach(item => {
                        const historyItem = document.createElement('div');
                        historyItem.className = 'history-item';
                        historyItem.innerHTML = `
                            <div class="history-date">${new Date(item.time).toLocaleString()}</div>
                            <div class="history-content">${escapeHtml(item.content)}</div>
                        `;
                        historyContent.appendChild(historyItem);
                    });
                } else {
                    historyContent.innerHTML = `
                        <div class="empty-state">
                            <i class="far fa-calendar-times"></i>
                            <p>暂无推送历史</p>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('加载推送历史失败:', error);
                historyContent.innerHTML = `
                    <div class="error-state">
                        <i class="fas fa-exclamation-triangle"></i>
                        <p>加载推送历史失败</p>
                        <button onclick="loadHistory()" class="retry-btn">重试</button>
                    </div>
                `;
            }
        }

        // 辅助函数：生成请求签名
        async function generateSignature(timestamp, nonce) {
            // 这里实现签名生成逻辑，通常需要与后端协商签名算法
            // 示例：使用SHA1加密(timestamp + nonce + secretKey)
            const secretKey = window.userInfo?.secretKey || '';
            const str = [timestamp, nonce, secretKey].sort().join('');
            const hash = await crypto.subtle.digest('SHA-1', new TextEncoder().encode(str));
            return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0')).join('');
        }

        // 辅助函数：HTML转义
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        // 免打扰时段开关逻辑
        document.getElementById('quiet-hours').addEventListener('change', function () {
            const timeRange = document.getElementById('quiet-time-range');
            if (this.checked) {
                timeRange.classList.remove('hidden');
            } else {
                timeRange.classList.add('hidden');
            }
        });

        // 提交订阅
        document.getElementById('subscribe-btn').addEventListener('click', function () {
            const province = document.getElementById('province').value;
            const city = document.getElementById('city').value;
            const time = document.querySelector('input[type="time"]').value;

            if (!province || !city) {
                alert('请选择完整的省市区信息');
                return;
            }

            // 获取选中的服务
            const selectedServices = [];
            document.querySelectorAll('.service-item.active').forEach(item => {
                selectedServices.push(item.getAttribute('data-service'));
            });

            if (selectedServices.length === 0) {
                alert('请至少选择一项订阅服务');
                return;
            }

            // 获取自定义标签
            const customTags = [];
            document.querySelectorAll('.tag').forEach(tag => {
                customTags.push(tag.textContent.replace(' ×', ''));
            });

            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
            this.classList.add('loading');

            // 发送数据到后端（测试接口 正式用/wechat/subscribe）
            fetch('/wechat/test-subscribe', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    city: city,
                    pushTime: time,
                    services: selectedServices,
                    customTags: customTags
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        document.getElementById('success-message').style.display = 'block';
                        this.innerHTML = '<i class="fas fa-check"></i> 保存订阅';

                        // 3秒后隐藏成功消息
                        setTimeout(() => {
                            document.getElementById('success-message').style.display = 'none';
                        }, 3000);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    this.innerHTML = '<i class="fas fa-exclamation-circle"></i> 保存失败';
                });
        });

        // 初始化开关样式
        document.querySelectorAll('[data-toggle="switch"]').forEach(checkbox => {
            // 添加样式
            checkbox.style.display = 'none';
            const switchElement = document.createElement('div');
            switchElement.className = 'switch' + (checkbox.checked ? ' on' : ' off');
            switchElement.innerHTML = '<div class="switch-handle"></div>';
            checkbox.parentNode.appendChild(switchElement);

            // 添加点击事件
            switchElement.addEventListener('click', function () {
                checkbox.checked = !checkbox.checked;
                this.classList.toggle('on');
                this.classList.toggle('off');
            });
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            loadCityData();  // 这里已经正确调用了
            // 其他初始化代码...
            // 在页面初始化时设置
            window.userInfo = {
                openid: '从微信授权获取的实际openid',
                secretKey: '与后端协商的签名密钥',
            };
        });

    </script>
</body>

</html>